<template>
	<view class="page" :class="{minH: isTab==1}" :style="{'--color': color}">
		<status-bar :title='tabTitle' back='0' :goHome='fromShare'></status-bar>
		<!-- 返回顶部 -->
		<backTop v-if='toTop'></backTop>
		<!-- 顶部分类 -->
		<view class="classNav" :style="{top: totalHeight+'px'}" v-if='columnData'>
			<u-tabs :list="columnData" keyName="website_list_title" :lineColor="color" lineWidth="26" :current="checkId" @click="checkList"
				:inactiveStyle="{color:'#444',fontSize:'26rpx',transform:'scale(1)'}" 
				:activeStyle="{color:'#222',fontSize:'26rpx',fontWeight:'bold',transform:'scale(1.05)'}"></u-tabs>
		</view>
		<!-- 分类结束-->
		
		
		<view class="indexContens" v-if='artList' :class="columnData?'paddingTop':''">
			<view class="itemsLists" v-for='(item,index) in artList' :key='index'>
				<navigator :url="'/otherPage/article/artDetail?artId='+item.website_article_id" hover-class="none">
					<!-- 没有图片 -->
					<view class="row f-column p-top30 p-bot30 bot" v-if="!item.website_article_img && !item.website_article_atlas">
						<text class="black size32 bold300 ellipsis_2">{{item.website_article_title}}</text>
						<view class="d-flex a-center m-top10 color_77 h7 bold400">
							<text class="m-right12">{{item.website_article_views}}阅读</text>
							<text class="m-right12">{{item.allZan}}点赞</text>
							<text class="m-right12">{{item.allComment}}评论</text>
						</view>
					</view>
					<!-- 右边小图 -->
					<view class="p-top30 p-bot30 bot" v-if="item.website_article_img && !item.website_article_atlas">
						<view class="d-flex j-sb">
							<view style="width: 430rpx;">
								<view class="black size32 bold300 ellipsis_2 m-bot20">{{item.website_article_title}}</view>
								<view class="color_77 size28 bold300 ellipsis">{{item.website_article_info}}</view>
							</view>
							<image :src="$imgUrls(item.website_article_img)" mode="aspectFill" class="list_one_img"></image>
						</view>
						<view class="d-flex a-center color_77 h7 bold400 m-top40">
							<text class="m-right12">{{item.website_article_views}}阅读</text>
							<text class="m-right12">{{item.allZan}}点赞</text>
							<text class="m-right12">{{item.allComment}}评论</text>
						</view>
					</view>
					<!--  一张大图 -->
					<view class="row p-top30 p-bot30 bot" v-if="item.website_article_atlas.length == 1">
						<text class="black size32 bold300 ellipsis_2">{{item.website_article_title}}</text>
						<image :src="$imgUrls(item.website_article_atlas[0])" mode="aspectFill" class="list_MAX_img m-top30 m-bot40"></image>
						<view class="row a-center color_77 h7 bold400">
							<text class="m-right12">{{item.website_article_views}}阅读</text>
							<text class="m-right12">{{item.allZan}}点赞</text>
							<text class="m-right12">{{item.allComment}}评论</text>
						</view>
					</view>
					<!-- 多图 -->
					<view class="row f-column p-top30 p-bot30 bot" v-if="item.website_article_atlas.length > 1">
						<text class="black size32 bold300 ellipsis_2">{{item.website_article_title}}</text>
						<scroll-view scroll-x="true" class="scroll-row imgsView m-top20 m-bot40">
							<image :src="$imgUrls(subItem)" mode="aspectFill" class="list_more_img" 
								v-for="(subItem,subIndex) in item.website_article_atlas" :key="subIndex"></image>
						</scroll-view>
						<view class="row a-center color_77 h7 bold400">
							<text class="m-right12">{{item.website_article_views}}阅读</text>
							<text class="m-right12">{{item.allZan}}点赞</text>
							<text class="m-right12">{{item.allComment}}评论</text>
						</view>
					</view>
				</navigator>
			</view>
			<empty v-if='nothing' type='1' cat='3' msg='没有找到相关内容哦 ~'></empty>
		</view>
		
		<tabBar :tab="9"></tabBar>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	var that;
	export default {
		data() {
			return {
				artList: [], // 文章列表
				columnData: '', // 分类列表
				imgUrl: this.imgUrl,
				list_id: '', //列表id
				page: 1, // 分页页码
				more: false,
				nothing: false,
				toTop: false,
				checkId: -1, // 当前选中标签的索引
				staticUrl: this.staticUrl,
				list_id_bak: '',
				fromShare:0,
				isTab: this.tab
			}
		},
		onLoad(options) {
			if(options.listId) this.list_id = options.listId;
		},
		onShow(){
			let that = this;
			that.getCloumn();
		},
		
		methods: {
			getCloumn() {
				let that = this;
				that.$http.post({
					url: '/zzj_singleSaleApi/getWebsiteList',
				}).then(res => {
					if (res.data) {
						that.columnData = res.data;
						if (!that.list_id) {
							that.checkId = 0
							that.list_id = res.data[0].website_list_id;
						}
						let index = that.columnData?.findIndex(item=>item.website_list_id == that.list_id)
						that.checkId = index == -1 ? 0 : index
						that.getList();
					} else {
						that.nothing = true
					}
				})
			},
			time(t) {
				let that = this;
				return that.$common.timeFormat(t, 'Y/M/D h:m')
			},
			checkList({index, website_list_id}) {
				let that = this;
				if (that.checkId != index) {
					that.checkId = index;
					that.artList = [];
					that.page = 1;
					uni.showLoading({
						title: '加载中'
					})
					that.list_id = website_list_id
					that.getList();
				}
			},
			getList() {
				let that = this;
				that.more = false
				that.nothing = false
				that.$http.post({
					url: '/zzj_singleSaleApi/getArticle',
					data: {
						listId: that.list_id,
						pagecount: 10,
						page: that.page
					}
				}).then(res => {
					uni.hideLoading()
					// if (res.columnData){
					// 	that.columnData = res.columnData;
					// 	that.checkId = 0
					// }

					if (res.data) {
						res.data.forEach((item, index) => {
							if (item.website_article_atlas) {
								item.website_article_atlas = item.website_article_atlas.split(",");
							}
						})
						if(that.page == 1){
							that.artList = res.data;
						}else{
							that.artList = that.artList.concat(res.data);
						}
						
						if (res.data.length > 9) {
							that.more = true;
						}
						this.$BarTitle(res.listTitle);
						that.title = res.listTitle
					}
					
					if (!that.artList || that.artList.length < 1)
						that.nothing = true
				
				})
			}
		},
		onReachBottom() {
			let that = this;
			if (that.more) {
				that.page += 1;
				that.getList();
			}
		},
		computed:{
			...mapState(['color','totalHeight','tabTitle','vid','share']),
		},
		onShareAppMessage(res) {
			let share = this.share;
			return {
				title: share.title,
				desc: share.desc,
				path: `/pages/index/index?share_v_id=${this.vid}&pageType=999`,
				imageUrl: `${share.imageUrl}`
			}
		},
		onPageScroll(ev) {
			let that = this;
			if (ev.scrollTop > 100) {
				that.toTop = true;
			} else {
				that.toTop = false
			}
		},
		onPullDownRefresh() {
			let that = this;
			that.artList = [];
			that.page = 1;
			that.getList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000)
		},
	}
</script>

<style scoped lang="scss">
	.page {
		&.minH{
			min-height: calc(100vh - 100rpx - env(safe-area-inset-bottom));
		}
	}
	.classNav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0; // 解决右侧遮挡
		z-index: 33;
		background: #FFFFFF;
	}

	.indexContens {
		width: 100%;
		padding: 0 30upx;
		background: #FFFFFF;
	}
	.paddingTop {
		padding-top: 90upx;
	}
	.itemsLists {
		width: 100%;
		overflow: hidden;

		&:nth-last-child(1) {
			border: none;
		}
	}
	.title{
		width:100%;
		padding:20rpx 30rpx 20rpx 44rpx;
		position: relative;
	}
	.title::after{
		content: "";
		width:6rpx;
		height: 26rpx;
		position: absolute;
		left:30rpx;
		top:50%;
		transform: translate(0,-50%);
		background-color: var(--color);
		border-radius: 4rpx;
	}
	.content{
		width:100%;
		background-color: var(--bgcolor);
		padding:0 30rpx;
	}
	.list_one_img{
		width:200rpx;
		height: 120rpx;
		overflow: hidden;
	}
	.list_MAX_img{
		width:100%;
		height: 340rpx;
		overflow: hidden;
	}
	.imgsView{
		height: 168rpx;
	}
	.list_more_img{
		width:210rpx;
		height: 180rpx;
		margin-right: 30rpx;
	}
	.list_more_img:last-child{
		margin-right: 0 !important;
	}
</style>